<template>
	<view class="funds-status_wrapper">
		<!-- 切换tab -->
		<view class="menu_tab">
			<text :class="{'menu_tab--default':true,'menu_tab--active':menuActive === index}" v-for="(item,index) in menuList"
			 :key="index" @click="changeMenuTab(index)">
				{{item}}
			</text>
		</view>
		<view v-if="sunCount !== 0">
			<view class="extract__list_record" v-if="menuActive === 0">
				<view class="content_item" v-for="(item,index) in profitListData.data" :key="index">
					<view class="item_number">
						<view class="item_title">
							<image src="https://pcdcoin.oss-cn-chengdu.aliyuncs.com/pcdApp/mine/qianbao.svg"></image>
							<text>数额</text>
						</view>
						<text class="item_title--number">{{$util.roundNumber(item.profit_amount,2)}}PCD</text>
					</view>
					<view class="item_data">
						<view class="item_title">
							<image src="https://pcdcoin.oss-cn-chengdu.aliyuncs.com/pcdApp/mine/date.svg"></image>
							<text>收益时间</text>
						</view>
						<text class="item_data--number">{{$util.FormatDate(item.create_time,'date')}}</text>
					</view>
					<view class="item_data">
						<view class="item_title">
							<image src="https://pcdcoin.oss-cn-chengdu.aliyuncs.com/pcdApp/mine/kuangshan.svg"></image>
							<text>矿场总收益</text>
						</view>
						<text class="item_data--number">{{$util.roundNumber(item.total_amount,2)}}PCD</text>
					</view>
					<view class="item_data">
						<view class="item_title">
							<image src="https://pcdcoin.oss-cn-chengdu.aliyuncs.com/pcdApp/mine/shouyi.svg"></image>
							<text>团队收益率</text>
						</view>
						<text class="item_data--number">{{item.profit_rate*100}}%</text>
					</view>
					<view class="item_data">
						<view class="item_title">
							<image src="https://pcdcoin.oss-cn-chengdu.aliyuncs.com/pcdApp/mine/zhuangtai.svg"></image>
							<text>状态</text>
						</view>
						<text class="item_data--number">已入账可提资产</text>
					</view>
				</view>
			</view>
			<view class="extract__list_record" v-if="menuActive === 1">
				<view class="rule_wrap">
					<view class="rule_item">
						<text>收益</text>
						<text>直推算力产出值：{{profitListData.direct_push*100}}%</text>
					</view>
					<view class="rule_item">
						<text>规则</text>
						<text>间推算力产出值：{{profitListData.second_direct_push*100}}%</text>
					</view>
				</view>
				
				<view class="content_item" v-for="item in profitListData.data" :key="item.user_id">
					<view class="item_data item_income">
						<view class="item_title">
							<image src="https://pcdcoin.oss-cn-chengdu.aliyuncs.com/pcdApp/mine/shouyi.svg"></image>
							<text>总收益</text>
						</view>
						<text class="item_data--number">{{$util.roundNumber(item.profit_amount,2)}} PCD</text>
					</view>
					<view class="item_data">
						<view class="item_title">
							<image src="https://pcdcoin.oss-cn-chengdu.aliyuncs.com/pcdApp/mine/date.svg"></image>
							<text>收益时间</text>
						</view>
						<text class="item_data--number">{{item.time}}</text>
					</view>
					<view class="item_data">
						<view class="item_title">
							<image src="https://pcdcoin.oss-cn-chengdu.aliyuncs.com/pcdApp/mine/zhitui.svg"></image>
							<text>直推收益</text>
						</view>
						<text class="item_data--number">{{$util.roundNumber(item.direct_invite_profit,2)}} PCD</text>
					</view>
					<view class="item_data">
						<view class="item_title">
							<image src="https://pcdcoin.oss-cn-chengdu.aliyuncs.com/pcdApp/mine/jiantui.svg"></image>
							<text>间推收益</text>
						</view>
						<text class="item_data--number">{{$util.roundNumber(item.indirect_invite_profit,2)}} PCD</text>
					</view>
					<view class="item_data">
						<view class="item_title">
							<image src="https://pcdcoin.oss-cn-chengdu.aliyuncs.com/pcdApp/mine/zhuangtai.svg"></image>
							<text>状态</text>
						</view>
						<text class="item_data--number">已入账可提资产</text>
					</view>
				</view>
			</view>
		</view>
		<!-- 暂无数据 -->
		<view v-else class="content_null">暂无数据</view>
		<!-- 分页 -->
		<view v-if="sunCount !== 0" class="pagination_wrap">
			<view class="pagination_left" @click="onPagination('previous')">
				<uni-icon type="back" color="#999999" size="20"></uni-icon>
			</view>
			<view class="pagination_text">{{currentPage + '/' + sumPage}}</view>
			<view class="pagination_right" @click="onPagination('next')">
				<uni-icon type="forward" color="#999999" size="20"></uni-icon>
			</view>
		</view>
	</view>
</template>

<script>
	import uniIcon from "@/components/uni-icon/uni-icon.vue";
	export default {
		data() {
			return {
				menuList: ['矿主收益', '推荐收益'], // 菜单列表
				menuActive: 0, // 当前选中菜单
				profitListData: {}, // 当前列表数据
				currentPage: 1, // 当前页
				limitPage: 10,  // 每页展示条数
				sunCount:0,      // 全部条数
				upgradeData:[0,1]
			}
		},
		computed: {
			sumPage() {
				let count = Math.ceil(this.profitListData.count / this.limitPage)
				if(!count || count === 0){
					return 1
				}else{
					return count
				}
			}
		},
		onReady() {
			this.getMinersProfit()
		},
		onPullDownRefresh() {
			switch (this.menuActive) {
				case 0:
					this.profitListData = {}
					this.getMinersProfit()
					break;
				case 1:
					this.profitListData = {}
					this.getInviteProfit()
					break;
			}
		},
		methods: {
			// 修改菜单
			changeMenuTab(index) {
				this.currentPage = 1
				this.menuActive = index
				switch (index) {
					case 0:
						this.profitListData = {}
						this.getMinersProfit()
						break;
					case 1:
						this.profitListData = {}
						this.getInviteProfit()
						break;
				}
			},
			onSwiperChange(event){
				this.menuActive = event.detail.current
				switch (index) {
					case 0:
						this.profitListData = {}
						this.getMinersProfit()
						break;
					case 1:
						this.profitListData = {}
						this.getInviteProfit()
						break;
				}
			},
			// 获取矿主收益列表
			getMinersProfit() {
				this.$api.getMinersProfit({
					limit: this.limitPage,
					page: this.currentPage
				}, res => {
					if (res.data.type == 'ok') {
						this.profitListData = res.data.message
						this.sunCount = res.data.message.count
					}
					uni.stopPullDownRefresh()
				})
			},
			// 获取推荐收益列表
			getInviteProfit() {
				this.$api.getInviteProfit({
					limit: this.limitPage,
					page: this.currentPage
				}, res => {
					if (res.data.type === 'ok') {
						this.profitListData = res.data.message
						this.sunCount = res.data.message.count
					}
					uni.stopPullDownRefresh()
				})
			},
			// 分页
			onPagination(arg) {
				if (arg === "previous") {
					if (this.currentPage > 1) {
						this.currentPage--
					} else {
						return
					}
				} else {
					if (this.currentPage < this.sumPage) {
						this.currentPage++
					} else {
						uni.showToast({
							title: '没有更多了',
							icon: 'none'
						})
						return
					}
				}
				switch (this.menuActive) {
					case 0:
						this.getMinersProfit()
						break;
					case 1:
						this.getInviteProfit()
						break;
				}
			},
			// 返回
			jumpBack() {
				uni.navigateBack({
					delta: 1
				});
			}
		},
		components: {
			uniIcon
		}
	}
</script>

<style lang="scss" scoped>
	@mixin flex-layout {
		display: flex;
		justify-content: space-around;
		align-items: center;
	}

	.funds-status_wrapper {
		height: 100vh;
	}

	.menu_tab {
		height: 89upx;
		padding: 0 20upx;
		font-size: 13px;
		background-color: #25263D;
		
		@include flex-layout;

		.menu_tab--default {
			height: 89upx;
			line-height: 89upx;
			color: #FFFFFF;
			box-sizing: border-box;
		}

		.menu_tab--active {
			color: #E13E4D;
			border-bottom: 2px solid #E13E4D;
		}
	}
	.extract__list_record {
		.rule_wrap{
			padding:10upx 0;
			.rule_item{
				display: flex;
				justify-content: center;
				align-items: center;
				margin: 10upx 0;
				text:last-child{
					color: #999999;
					margin-left:20upx;
				}
			}
		}
		
		.content_item {
			margin-bottom: 20upx;
			padding: 0 29upx 0 40upx;
			background-color: #FFFFFF;
			box-shadow:0px 1px 2px 0px rgba(0, 0, 0, 0.1);
			.item_number,
			.item_data,
			.item_status {
				display: flex;
				justify-content: space-between;
				align-items: center;
				height: 80upx;
				font-size: 13px;

				.item_title {
					display: flex;
					align-items: center;
					image {
						width: 26upx;
						height: 26upx;
						margin-right: 10upx;
					}
				}

				.item_title--number {
					color: #E03E4D;
				}

				.item_data--number {
					color: #999999;
				}

				.status_handle {
					color: #999999;
					.status__btn_handle {
						padding: 6upx 30upx;
						margin-left: 20upx;
						border-radius: 40upx;
						background-color: #E13E4D;
						color: #FFFFFF;
					}
					.status__btn_disabled {
						background-color: #999999;
					}
				}
			}
			.item_number,.item_income{
				position: relative;
			}
			.item_number:after{
				@include border__line_bgwhite--bottom;
			}
			.item_income:after{
				@include border__line_bgwhite--bottom;
			}
		}

		.content_null {
			font-size: 18px;
		}
	}

	.content_null{
		height: 80%;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	
	.pagination_wrap {
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 80%;
		margin: 40upx auto;

		.pagination_left,
		.pagination_right {
			padding: 0 10upx;
			border-radius: 10upx;
			border: 1px solid #BBBBBB;
		}
	}
</style>
